<%@ include file="../common/IncludeTop.jsp"%>

<script type="text/javascript">
	$(function () {
		//为username绑定失去焦点事件
		$("#username").on('blur',function () {
			//用户名不为空，发送AJAX请求
			if(this.value != ""){
				$.getJSON("account","action=ajaxExistsUsername&username=" + this.value,function (data){
					if(data.accountExist)
						$("#msg").text("Username is taken");
					else
						$("#msg").text("Username is available");
				});
			}
			else
				$("#msg").text("Username can not be null");
		});

		var password = "";
		var repeatedPassword = "";
		//为password绑定失去焦点事件
		$("#password").on('blur',function () {
			//获取输入的第一个密码
			password = this.value;
			if(password == "")
				$("#pwd1Error").text("Password can not be null");
			else
				$("#pwd1Error").text("");
			if(password != repeatedPassword)
				$("#pwd2Error").text("Two password entries are inconsistent");
			else
				$("#pwd2Error").text("");
		})

		//为repeatedPassword绑定失去焦点事件
		$("#repeatedPassword").on('blur',function () {
			//获取输入的第二个密码
			repeatedPassword = this.value;
			if(password != repeatedPassword)
				$("#pwd2Error").text("Two password entries are inconsistent");
			else
				$("#pwd2Error").text("");
		});

		//为验证码图片绑定单击事件
		$("#code_image").on('click',function () {
			this.src = "kaptcha.jpg?" + new Date();
		});
	});
</script>

<div id="Catalog">
	<form action="account?action=insertAccountInDB" method="post">
		<h3>User Information</h3>

		<table style="margin-left: 300px">
			<tr>
				<th>User ID:</th>
				<td><input type="text" name="username" id="username" value="${sessionScope.register_username}"/></td>
				<td id="msg" style="color:red;width: 300px;background-color: white;font-size: 16px"></td>
			</tr>
			<tr>
				<th>New password:</th>
				<td>
					<input id="password" type="password" name="password" value="${sessionScope.register_password}"/>
				</td>
				<td id="pwd1Error" style="color:red;width: 300px;background-color: white;font-size: 16px"></td>
			</tr>
			<tr>
				<th>Repeat password:</th>
				<td>
					<input id="repeatedPassword" type="password" name="repeatedPassword" value="${sessionScope.register_repeated_password}"/>
				</td>
				<td id="pwd2Error" style="color:red;width: 300px;background-color: white;font-size: 16px"></td>
			</tr>
			<tr>
				<th>Verification code:</th>
				<td>
					<input type="text" name="code" style="width: 60px">
					<img id="code_image" style="width: 88px;height: 22px;position: absolute;+margin-top:1px;margin-left: 5px" src="kaptcha.jpg">
				</td>
			</tr>
			<c:if test="${sessionScope.codeError != null}">
				<tr>
					<td colspan="3"  style="color: red">${sessionScope.codeError}</td>
				</tr>
			</c:if>
			<c:if test="${sessionScope.passwordFailed != null}">
				<tr>
					<td colspan="3"  style="color: red">${sessionScope.passwordFailed}</td>
				</tr>
			</c:if>
			<c:if test="${sessionScope.usernameFailed != null}">
				<tr>
					<td colspan="3"  style="color: red">${sessionScope.usernameFailed}</td>
				</tr>
			</c:if>
		</table>

		<input type="submit" name="newAccount" value="Register" />
	</form>
</div>

<%@ include file="../common/IncludeBottom.jsp"%>